<template>
	<div class="index">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list style="background-color: #f1f1f1" v-model="loading" :finished="finished" finished-text="" @load="onLoad">
				<van-cell-group v-for="(item, index) in dataList" :key="index" inset>
					<van-cell>
						<template #title>
							<div class="title van-ellipsis">{{ item.title }}</div>
						</template>
						<template #extra>
							<van-tag v-if="item.orderStatusMsg === '已成交'" type="success">{{item.orderStatusMsg}}</van-tag>
							<van-tag v-else-if="item.orderStatusMsg === '已报价'" type="success">{{item.orderStatusMsg}}</van-tag>
							<van-tag v-else-if="item.orderStatusMsg === '待处理'" type="warning">{{item.orderStatusMsg}}</van-tag>
							<van-tag v-else-if="item.orderStatusMsg === '已流失'" plain type="danger">{{item.orderStatusMsg}}</van-tag>
						</template>
					</van-cell>
					<van-cell title="报价日期" :value="item.quotationDate"/>
					<van-cell title="询价方" :value="item.customerName"/>
<!--					<van-cell title="机型" :value="item.productName"/>-->
					<van-collapse v-model="item.activeName" accordion>
						<van-collapse-item :title="item.title" name="1" :value="item.quotationDate">
							<div class="pro-card" v-for="quote in item.businessProductList" :key="item.id">
								<div class="pro-card-item flex-between-end">
									<div class="flex-start">
										<div class="img-left flex-center">
											<van-image
												width="100"
												height="100"
												fit="contain"
												:src="quote.coverImage"
											/>
											<!-- <img src="@/assets/image/click-icon.png" alt="" /> -->
										</div>
										<div class="flex-between-column color-grey" style="line-height: 26px">
											<p style="white-space: nowrap">机型：{{quote.productName}}</p>
											<p>成色：{{quote.isNewProductMsg}}</p>
											<p>月租：{{quote.price}}</p>
										</div>
									</div>
<!--									<div style="white-space: nowrap">{{quote.quantity}}台</div>-->
								</div>
								<div class="color-dark flex-between m-b-xs">
									<strong>总计:{{quote.quantity * quote.price}}元</strong>
									<strong>{{quote.quantity}}台</strong>
								</div>
								
							</div>
							<div class="btn-wrap flex-end">
								<van-button type="primary" v-if="item.orderStatus === 'YBJ'" plain size="small" style="width: 60px" @click="handleTrade(item)"
								>成交
								</van-button>
								<van-button type="primary" v-if="item.orderStatus === 'DCL' || item.orderStatus === 'YBJ'" plain size="small" style="width: 60px" @click="handleLosing(item)"
								>流失
								</van-button>
								<van-button type="primary"  v-if="item.orderStatus === 'DCL'" plain size="small" @click="handleSendQuote(item)"
								>发送报价单
								</van-button>
								<van-button type="primary" v-if="item.orderStatus === 'YBJ'" size="small" @click="toDetail(item)">查看报价单</van-button>
							</div>
						</van-collapse-item>
					</van-collapse>
				</van-cell-group>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import {useRouter, useRoute} from 'vue-router'
import {getBusinessQuotationList, updateQuoteStatus} from '@/api/businessOpportunity'
import {getAssetsImages} from '@/utils'
import {reactive, toRefs, onBeforeMount, nextTick, onMounted} from 'vue'
import {Toast} from "vant";

export default {
	setup() {
		const router = useRouter()
		const route = useRoute()
		const getAssetsImages1 = getAssetsImages
		const state = reactive({
			queryData: {
				businessId: '',
				current: 1,
				size: 1000
			},
			loading: false,
			disabled: false,
			finished: false,
			refreshing: false,
			hasNextPage: false,
			total: 0,
			dataList: []
		})
		
		onBeforeMount(() => {
			if (route.query.businessId) {
				state.queryData.businessId = route.query.businessId
				console.log(",", route.query)
			}
		})
		
		const getList = () => {
			console.log("queryData:::", state.queryData)
			getBusinessQuotationList(state.queryData)
				.then((res) => {
					if (state.refreshing) {
						state.dataList = []
						state.refreshing = false
					}
					const {records, total} = res
					records.map((item) => {
						item.activeName = '1'
					})
					state.hasNextPage = false
					state.dataList = records
					state.total = total
					state.finished = !state.hasNextPage
				})
				.catch(() => {
					state.refreshing = false
					state.finished = true
				})
		}
		const onLoad = () => {
			if (state.hasNextPage) {
				state.queryData.current++
				getList()
			}
		}
		// 下拉刷新
		const onRefresh = () => {
			// 清空列表数据
			state.finished = false
			state.dataList = []
			
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			// state.loading = true
			state.queryData.current = 1
			state.hasNextPage = false
			getList()
		}
		const handleTrade = (item) => {
			router.push({path: './addTrade', query: {quoteId: item.id, quoteStatus: item.orderStatus}})
		}
		
		const handleLosing = (item) => {
			router.push({path: './addLosing', query: {quoteId: item.id, quoteStatus: item.orderStatus}})
		}
		
		const handleSendQuote = (item) => {
			let params = {
				id: item.id,
				originQuotationStatus: item.orderStatus,
				quotationStatus: "YBJ",
			}
			updateQuoteStatus(params).then(res => {
				console.log(res)
				Toast.success('操作成功！')
				setTimeout(() => {
					getList()
				}, 500)
			})
		}
		
		const toDetail = (item) => {
			router.push({path: './quotationDetail', query: {id: item.id}})
		}
		
		onBeforeMount(() => {
			getList()
		})
		return {
			...toRefs(state),
			onLoad,
			onRefresh,
			handleTrade,
			handleLosing,
			handleSendQuote,
			toDetail,
			getAssetsImages1
		}
	}
}
</script>
<style lang="less" scoped>
.index {
	background-color: #f1f1f1;
	//height: 100vh;
	
	.van-cell-group--inset {
		margin: 10px;
	}
	
	.title {
		font-size: 16px;
		font-weight: 600;
	}
	
	.pro-card {
		background-color: #f7f8fa;
		padding: 10px 15px;
		
		.pro-card-item {
			border-bottom: 1px solid #eee;
			margin-bottom: 10px;
			padding-bottom: 10px;
			
			.img-left {
				width: 100px;
				height: 100px;
				display: block;
				margin-right: 15px;
			}
		}
	}
	.btn-wrap {
		background-color: #f7f8fa;
		padding-bottom: 10px;
		padding-right: 10px;
		
		.van-button {
			margin-left: 10px;
		}
	}
}
</style>
